<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="swiper-bundle.min.css">
		<!-- Demo styles -->
		<style>
		  html,
		  body {
		    position: relative;
		    height: 100%;
		  }
		
		  body {
		    background: #eee;
		    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
		    font-size: 14px;
		    color: #000;
		    margin: 0;
		    padding: 0;
		  }
		
		  .swiper {
		    width: 600px;
		    height: 300px;
		  }
		
		  .swiper-slide {
		    text-align: center;
		    font-size: 18px;
		    background: #fff;
		
		    /* Center slide text vertically */
		    display: -webkit-box;
		    display: -ms-flexbox;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-pack: center;
		    -ms-flex-pack: center;
		    -webkit-justify-content: center;
		    justify-content: center;
		    -webkit-box-align: center;
		    -ms-flex-align: center;
		    -webkit-align-items: center;
		    align-items: center;
		  }
		
		  .swiper-slide img {
		    display: block;
		    width: 100%;
		    height: 100%;
		    object-fit: cover;
		  }
		  .swiper-pagination-bullet-active{
			  background-color: red;
			  width:40px;
			  border-radius:5px;
		  }
		</style>
	</head>
	<body>
		<div class="swiper mySwiper">
		  <div class="swiper-wrapper">
		    <div class="swiper-slide">Slide 1</div>
		    <div class="swiper-slide">Slide 2</div>
		    <div class="swiper-slide">Slide 3</div>
		    <div class="swiper-slide">Slide 4</div>
		    <div class="swiper-slide">Slide 5</div>
		    <div class="swiper-slide">Slide 6</div>
		    <div class="swiper-slide">Slide 7</div>
		    <div class="swiper-slide">Slide 8</div>
		    <div class="swiper-slide">Slide 9</div>
		  </div>
		  <div class="swiper-pagination"></div>
		  
		  <!-- 如果需要导航按钮 -->
		    <div class="swiper-button-prev"></div>
		    <div class="swiper-button-next"></div>
		</div>
		
		<script src="swiper-bundle.min.js"></script>
		
		<script>
		  var swiper = new Swiper(".mySwiper", {
		    pagination: {
		      el: ".swiper-pagination",
		    },
			autoplay: {
			    delay: 1000,
			    stopOnLastSlide: false,
			    disableOnInteraction: true,
			},
			 // 如果需要前进后退按钮
			    navigation: {
			      nextEl: '.swiper-button-next',
			      prevEl: '.swiper-button-prev',
			    },
			loop: true,
		  });
		</script>
	</body>
</html>
